<!-- 中标候选人 -->
<template>
    <div class="app-container">
        <div style="margin-bottom: 1.2%;"><span>中标候选人</span>
            <el-button type="primary" style="margin-left: 15px;" @click="addCandidate"
                v-if="this.$route.query.status === 5" size="mini">添加</el-button>
        </div>

        <el-table :data="tableData" stripe style="width: 100%">
            <el-table-column type="index" label="序号" width="50px">
            </el-table-column>
            <el-table-column prop="hName" label="供应商名称">
            </el-table-column>
            <el-table-column prop="finalOffer" label="最终报价(万元)">
                <template slot-scope="scope">
                    {{ (scope.row.finalOffer / 10000) }}
                </template>
            </el-table-column>
            <el-table-column prop="finalScore" label="最终得分">
            </el-table-column>
            <el-table-column prop="recommend" label="是否推荐">
                <template slot-scope="scope">
                    {{ scope.row.recommend == 0 ? '是' : '否' }}
                </template>
            </el-table-column>
            <el-table-column prop="ranking" label="排名">
            </el-table-column>
            <el-table-column label="操作">
                <template sloat-scope="scope">
                    <el-button @click="handleClick(scope.row)" type="text" size="small">编辑</el-button>
                    <el-button type="text" size="small">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-dialog title="添加中标候选人" :visible.sync="addOpen" width="62%">
            <el-form ref="form" :model="form" :rules="rules" label-width="120px">
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="供应商名称" prop="hId">
                            <el-select v-model="form.hId" placeholder="请选择" @change="onSelectChange">
                                <el-option v-for="(item, index) in submissionList" :key="index" :label="item.hName"
                                    :value="item.hid">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="最终报价" prop="finalOffer" class="form-input">
                            <el-input v-model="form.finalOffer" placeholder="请输入最终报价" />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="最终得分" prop="finalScore" class="form-input">
                            <el-input v-model="form.finalScore" placeholder="请输入最终得分" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="是否推荐" prop="recommend" class="form-input">
                            <el-select v-model="form.recommend" placeholder="请选择">
                                <el-option value="0" label="是" />
                                <el-option value="1" label="否" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="发送时间" prop="sendTime" class="form-input">
                            <el-date-picker v-model="form.sendTime" type="datetime" placeholder="请选择发送时间"
                                value-format="yyyy-MM-dd HH:mm:ss" default-time="09:00:00">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="24">
                        <el-form-item label="专家签到表" prop="zSign" class="form-input">
                            <el-upload class="upload-demo" action="#" :on-remove="handleRemoveFile"
                                :before-upload="uploadFileFun" :http-request="uploadSignFile" multiple
                                :file-list="form.sign">
                                <el-button size="small" type="primary">点击上传</el-button>
                                <div slot="tip" class="el-upload__tip">支持pdf,xls,png,jpg文件，且不超过10mb</div>
                            </el-upload>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="24">
                        <el-form-item label="审查表" prop="zCensor" class="form-input">
                            <el-upload class="upload-demo" action="#" :on-remove="handleRemoveFile"
                                :before-upload="uploadFileFun" :http-request="uploadCensorFile" multiple
                                :file-list="form.censor">
                                <el-button size="small" type="primary">点击上传</el-button>
                                <div slot="tip" class="el-upload__tip">支持pdf,xls,png,jpg文件，且不超过10mb</div>
                            </el-upload>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="24">
                        <el-form-item label="评审表" prop="zReview" class="form-input">
                            <el-upload class="upload-demo" action="#" :on-remove="handleRemoveFile"
                                :before-upload="uploadFileFun" :http-request="uploadReviewFile" multiple
                                :file-list="form.review">
                                <el-button size="small" type="primary">点击上传</el-button>
                                <div slot="tip" class="el-upload__tip">支持pdf,xls,png,jpg文件，且不超过10mb</div>
                            </el-upload>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="24">
                        <el-form-item label="最终汇总表" prop="zSummary" class="form-input">
                            <el-upload class="upload-demo" action="#" :on-remove="handleRemoveFile"
                                :before-upload="uploadFileFun" :http-request="uploadSummaryFile" multiple
                                :file-list="form.summary">
                                <el-button size="small" type="primary">点击上传</el-button>
                                <div slot="tip" class="el-upload__tip">支持pdf,xls,png,jpg文件，且不超过10mb</div>
                            </el-upload>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitForm">确 定</el-button>
                <el-button @click="cancel">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { getALlSupplierList, getAllBidder, uplodaBudgetFile, addCandidate } from '@/api/system/purchase.js'
export default {
    data() {
        return {
            form: {
                ranking: 0,
            },
            selectedName: '',
            submissionList: [],//全部投标人
            addOpen: false,
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                iNumber: '',
            },
            tableData: [],
            rules: {
                hId: [
                    { required: true, message: '请选择供应商名称', trigger: 'change' }
                ],
                finalOffer: [
                    { required: true, message: '请输入最终报价', trigger: 'blur' }
                ],
                finalScore: [
                    { required: true, message: '请输入最终得分', trigger: 'blur' }
                ],
                recommend: [
                    { required: true, message: '请选择是否推荐', trigger: 'change' }
                ],
                ranking: [
                    { required: true, message: '请输入排名', trigger: 'blur' }
                ],
                bidder: [
                    { required: true, message: '请选择是否中标', trigger: 'change' }
                ],
                sendTime: [
                    { required: true, message: '请选择发送时间', trigger: 'change' }
                ],
                zSign: [
                    { required: true, message: '请上传专家签到表', trigger: 'change' }
                ],
                zCensor: [
                    { required: true, message: '请上传审查表', trigger: 'change' }
                ],
                zReview: [
                    { required: true, message: '请上传评审表', trigger: 'change' }
                ],
                zSummary: [
                    { required: true, message: '请上传最终汇总表', trigger: 'change' }
                ]
            },
        }
    },
    methods: {
        onSelectChange(selectedValue) {
            // 根据选中的 hid 获取对应的 hName                        
            const selectedItem = this.submissionList.find(item => item.hid === selectedValue);
            this.form.hName = selectedItem.hName;
        },
        uploadFileFun(file) {
            var test = /(doc|docx|pdf|txt|png|xls)$/.test(file.name.split('.').pop().toLowerCase());
            if (!test) {
                this.$message.error("请上传正确的文档格式!");
                return false;
            }
            const isLt2M = file.size / 1024 / 1024 < 10;
            if (!isLt2M) {
                this.$message.error("上传文件大小不能超过 10MB!");
                return false;
            }
        },
        uploadSummaryFile(file) {
            this.uploadDeviceFile(file)
                .then(fileInfo => {
                    if (this.form.summary == null) {
                        this.form.summary = [];
                    }
                    this.form.summary.push(fileInfo);
                })
                .catch(err => {
                    console.error('上传文件失败:', err);
                });
        },
        uploadReviewFile(file) {
            this.uploadDeviceFile(file)
                .then(fileInfo => {
                    if (this.form.review == null) {
                        this.form.review = [];
                    }
                    this.form.review.push(fileInfo);
                })
                .catch(err => {
                    console.error('上传文件失败:', err);
                });
        },
        uploadCensorFile(file) {
            this.uploadDeviceFile(file)
                .then(fileInfo => {
                    if (this.form.censor == null) {
                        this.form.censor = [];
                    }
                    this.form.censor.push(fileInfo);
                })
                .catch(err => {
                    console.error('上传文件失败:', err);
                });
        },
        uploadSignFile(file) {
            this.uploadDeviceFile(file)
                .then(fileInfo => {
                    if (this.form.sign == null) {
                        this.form.sign = [];
                    }
                    this.form.sign.push(fileInfo);
                })
                .catch(err => {
                    console.error('上传文件失败:', err);
                });
        },
        async uploadDeviceFile(file) {
            try {
                // 创建formdata实例
                let formData = new window.FormData();
                // 将获取的文件通过append方法加入实例中
                formData.append("file", file.file);
                // 发送axios请求
                const res = await uplodaBudgetFile(formData);
                // 拿到后端响应的文件名称反显到列表的form
                const fileInfo = {
                    name: res.data.name,
                    url: res.data.url,
                    size: res.data.size,
                    uid: file.file.uid,
                };
                return JSON.stringify(fileInfo);
            } catch (err) {
                console.error('上传文件失败:', err);
                throw err;
            }
        },
        //删除文件
        handleRemoveFile(file) {
            removeFile(file.name).then(res => {
                if (res.data == 1) {
                    this.$message({
                        message: '删除成功',
                        type: 'success'
                    });
                }
                const index = this.form.fileList.findIndex(f => f.name === file.name);
                this.form.fileList.splice(index, 1); // 从 fileList 中移除一个元素，从 index 位置开始
            })
        },
        cancel() {

        },
        //提交
        submitForm() {
            let sign = this.form.sign;
            let review = this.form.review;
            let censor = this.form.censor;
            let summary = this.form.summary;

            this.form.sign = "";
            this.form.review = "";
            this.form.censor = "";
            this.form.summary = "";

            this.form.sign = JSON.stringify(sign);
            this.form.review = JSON.stringify(review);
            this.form.censor = JSON.stringify(censor);
            this.form.summary = JSON.stringify(summary);
            this.form.iNumber = this.queryParams.iNumber;

            addCandidate(this.form).then(res => {                
                if (res.data > 0) {
                    this.$message({
                        type: 'success',
                        message: '添加成功!'
                    });
                    this.addOpen = false;
                    this.form = {};
                    // this.tableData = this.tableData.forEach(item => {
                    //     item.hId != res.hId
                    // });
                    this.allSupplierList();
                    this.allBidder();
                } else {
                    this.$message({
                        type: 'error',
                        message: '添加失败!评标期已过或未到评标期'
                    });
                }
                sign='';review='';censor='';summary='';

            })
        },
        //全部投标人(写反了,这个实际是中标候选人)
        allSupplierList() {
            getALlSupplierList(this.queryParams).then(res => {
                this.tableData = res.rows;
                this.tableData.sort((a, b) => a.ranking - b.ranking);
            })
        },
        //打卡弹窗
        addCandidate() {
            this.addOpen = true;
        },
        //全部投标人
        allBidder() {
            setTimeout(() => {
                getAllBidder(this.queryParams.iNumber).then(res => {
                    this.tableData.forEach(ele => {
                        res = res.filter(s => s.hid != ele.hId)
                    })
                    this.submissionList = res;
                })
            }, 200); // 200毫秒的延迟

        },
    },
    mounted() {
        this.queryParams.iNumber = this.$route.query.iNumber;
        this.allSupplierList();
        this.allBidder();
        console.log(this.$route.query,"这是测试路由中的参数");

    },

}
</script>
<style scoped>
/* .app-container>>>.el-input__inner {
    border: none;
    box-shadow: 0 0 0 0px;
} */

.my-label2 {
    width: 100px;
}

.upload-demo {
    display: flex;
    align-items: center;
}

.el-upload__tip {
    margin-left: 10px;
}
</style>